<template>
  <div>
    <div
      class="chart-wrapper"
      ref="chartBox"
      v-show="chartData.length > 0"
      style="width: 100%"
      :style="{ height: (isFullscreen ? hHeight : 280) + 'rem' }"
    ></div>
    <el-empty
      description="暂无数据"
      v-show="chartData.length == 0"
      :image-size="60"
      style="height: 280rem"
    />
  </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref, watch, nextTick } from "vue";
import * as echarts from "echarts";
import { debounce, nowSize } from "@/utils/util.js";
import { ElLoading, ElMessage } from "element-plus";
import screenfull from "screenfull";

const hHeight = ref(0);
const isFullscreen = ref(false);

const chartBox = ref();
let myChart = ref(null);
// const colorList = ref(['#6b94aa', '#a8c9e8', '#6291e3', '#89caf2', '#bdf5e8', '#9cf7b4', '#6b94aa', '#a8c9e8', '#6291e3', '#89caf2', '#bdf5e8', '#9cf7b4'])

// 传入数据¸
const props = defineProps({
  chartData: {
    type: Array,
    default: [],
  },
  currentColorList: {
    type: Array,
    default: [],
  },
  seriesDataList: {
    type: Array,
    default: [],
  },
  keyList: Array, // 显示值的参数
  xAxisName: String, // 横坐标名称
  option: Object,
  chartType: {
    type: Array,
    default: [{ type: "bar", name: "value" }],
  }, // 显示几个图
  orient: {
    type: String,
    default: "horizontal",
  },
  linerColor: {
    type: [String, Array],
    default: ["#11100e", "#11100e"],
  },
  unit: {
    type: Array,
    default: ["件", "元"],
  },
  chartMax: {
    type: Number,
    default: 0,
  },
  twoYAxis: Boolean,
});

const resizeHandler = debounce(() => {
  if (myChart) {
    myChart.resize();
  }
}, 200);

onMounted(() => {
  setTimeout(() => {
    if (props.chartData.length == 0) return;
    getChartData();
  }, 1000);
  isFullscreenFn();
  window.addEventListener("resize", resizeHandler);
  window.addEventListener("resize", isFullscreenFn);
  nextTick(() => {
    hHeight.value = document.documentElement.clientHeight - 800;
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeHandler);
  window.removeEventListener("resize", isFullscreenFn);
});

watch(
  () => props.chartData,
  (newVal, oldVal) => {
    getChartData();
  }
);

const isFullscreenFn = () => {
  // 利用屏幕分辨率和window对象的内高度来判断兼容IE
  let winFlag = window.innerHeight === window.screen.height;
  // 利用window全屏标识来判断 -- IE无效
  let isFull = window.fullScreen || document.webkitIsFullScreen;

  if (isFull === undefined) {
    isFullscreen.value = winFlag;
  } else {
    isFullscreen.value = winFlag || isFull;
  }
  // console.log('1111111', winFlag);  // true全屏   false不是全屏
};

const getChartData = () => {
  let seriesData = [];
  let xAxisList = [];
  let legendList = [];
  props.chartData.forEach((t, v) => {
    console.log(t);
    xAxisList.push(t.name);
  });
  console.log();
  let seriesList = props.seriesDataList;
  for (let index = 0; index < seriesList.length; index++) {
    const element = seriesList[index];
    let itemDate = [];
    props.chartData.forEach(function (t, v) {
      itemDate.push(t[element]);
    });
    console.log(element);
    seriesData.push({
      name: element,
      type: "bar",
      stack: index < seriesList.length / 2 ? "bz" : "sj",
      smooth: true,
      data: itemDate,
      showSymbol: false,
      // label: {
      //     show: true,
      //     color: '#fff',
      //     fontSize: nowSize(10)
      // },
      // symbol: "emptyCircle",
      // symbolSize: 6,
      avoidLabelOverlap: true,
      barWidth: nowSize(16), //柱图宽度
      itemStyle: {
        color: props.currentColorList[index],
      },
      yAxisIndex: index == props.chartType.length - 1 && props.twoYAxis ? 1 : 0,
    });
  }

  nextTick(() => {
    initEcharts(legendList, xAxisList, seriesData);
  });
};

const initEcharts = (legendList, xAxisList, seriesData) => {
  myChart = echarts.init(chartBox.value);
  let option = {
    colorList: props.currentColorList,
    grid: {
      top: "12%",
      left: "12%",
      right: "0%",
      bottom: "2%",
      // containLabel: true
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      bottom: "1%",
      data: legendList,
      icon: "circle",
      itemWidth: nowSize(10),
      itemHeight: nowSize(10),
      textStyle: {
        color: "#7da0ca",
      },
    },
    xAxis: {
      show: false,
      type: "category",
      data: ["星沙厂", "城北厂", "城南厂", "城西厂"],
      // data: xAxisList,
      // boundaryGap: false,
      axisLabel: {
        show: true,
        color: "#7da0ca",
        fontSize: nowSize(12),
        fontWeight: "bold",
      },
      axisLine: {
        lineStyle: {
          color: "#dbdfe3",
        },
      },
    },
    yAxis: [
      {
        type: "value",
        name: props.unit[0],
        max: function (value) {
          //取最大值向上取整为最大刻度
          let integer = Math.ceil(value.max / 0.8);
          let length = String(integer).length;
          console.log(
            Math.ceil(integer / Math.pow(10, length - 2)) *
              Math.pow(10, length - 2)
          );
          return (
            Math.ceil(integer / Math.pow(10, length - 2)) *
            Math.pow(10, length - 2)
          );
        },
        nameTextStyle: {
          color: "#7da0ca",
          fontSize: nowSize(12),
          padding: [0, 0, 2, 0],
        },
        splitLine: {
          lineStyle: {
            width: nowSize(1),
            type: "dashed",
          },
        },
        axisLabel: {
          show: true,
          margin: nowSize(10),
          color: "#7da0ca",
          fontSize: nowSize(12),
          fontWeight: "bold",
        },
      },
      //右边y轴
      {
        show: props.twoYAxis,
        type: "value",
        name: props.unit[1],
        nameTextStyle: {
          color: "#3399FF",
          fontSize: nowSize(14),
        },
      },
    ],
    series: seriesData,
  };
  if (props.option) {
    option = Object.assign(option, props.option);
  }
  myChart.off("click");
  // myChart.on("click", function (params) {
  //     that.$emit("clickEchartIns", params); // 所选参数
  // });
  myChart.setOption(option, true);
};
</script>

<style scoped lang="less"></style>
